<template>
  <div id="iconPanel" ref="iconPanel" class="icon-panel">
    <i class="iconfont icon-draghorizontal"></i>
    <div class="icon-tool">
      <i class="iconfont icon-circle" draggable="true" data-shape="circle"></i>
      <i class="iconfont icon-rectangle" draggable="true" data-shape="rect"></i>
      <i class="iconfont icon-tuoyuanxing" draggable="true" data-shape="ellipse"></i>
      <i class="iconfont icon-tubiao" draggable="true" data-shape="diamond"></i>
      <i class="iconfont icon-duobianxing" draggable="true" data-shape="modelRect"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IconPanel',
  mounted() {
    // 拖拽结束
    this.$refs.iconPanel.querySelector('.icon-tool').addEventListener('dragend', e => {
      // console.log(e)
      if (e.target.classList.contains('iconfont')) {
        this.$emit('canvas-add-node', e)
      }
    })

    // 组织默认动作
    document.addEventListener('drop', e => {
      e.preventDefault()
    }, false)
  }
}
</script>

<style lang="scss" scoped>
.icon-panel {
  width: 100%;
}

.icon-draghorizontal {
  background: #eee;
  display: block;
  margin-bottom: 10px;
  width: 100%;
  height: 26px;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
}

.icon-tool {
  display: flex;
  flex-direction: column;

  .iconfont {
    font-size: 24px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 4px;
    cursor: move;
  }
}
</style>